import { useCallback, useMemo, useState } from "react";
import ChildCom from "./ChildCom";
// 默认情况下 父组件重新渲染了 子组件也会重新渲染
// 如果子组件没有依赖父组件的状态 则子组件不应该重新渲染。如何进行优化：
// 1. React.memo() 这是一个高级组件（接收一个组件，返回一个新的组件）


export default function ParentCom() { 

    const [count, setCount]=useState(0)
    console.log("父组件ParentComponent渲染")
    // 0x123  0x345
    // const obj = {
    //     name:"张三",
    //     age:18
    // }
    const obj = useMemo(()=>{
        return {
            name:"张三",
            age:18
        }
    },[])

    const handleClick = useCallback(()=>{
        console.log("子组件ChildCom点击")
    },[])
    return (
        <div>
            <h1>父组件ParentComponent</h1>
            <h2>{count}</h2>
            <button onClick={()=>setCount(count+1)}>+</button>
            <ChildCom obj={obj} handleClick={handleClick}/>
            
        </div>
    )
}